@extends('newAdmin.layout.main')

@section('content')
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">角色管理</a>
        <a>
          <cite>角色列表</cite>
        </a>
      </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ 刷新</i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row">
            <form id="add-role" class="layui-form layui-col-md12 x-so layui-form-pane">
                {{csrf_field()}}
                <div class="layui-form">
                    <div class="layui-inline"><input class="layui-input" lay-verify="required|name" placeholder="英文角色名" name="name"></div>
                    <div class="layui-inline"><input class="layui-input" lay-verify="required|name_cn" placeholder="中文角色名" name="name_cn"></div>
                    <div class="layui-inline">
                        <input class="layui-btn" value="增加" lay-submit lay-filter="add" style="width:100%;" type="button">
                    </div>
                </div>
            </form>
        </div>
        <table class="layui-table">
            <thead>
            <tr>
                {{--<th>--}}
                {{--<div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>--}}
                {{--</th>--}}
                <th>ID</th>
                <th>英文角色名</th>
                <th>中文角色名</th>
                <th>加入时间</th>
                <th>操作</th></tr>
            </thead>
            <tbody>
            @foreach($roles as $role)
                <tr>
                    {{--<td>--}}
                    {{--<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div>--}}
                    {{--</td>--}}
                    <td>{{$role->id}}</td>
                    <td>{{$role->name}}</td>
                    <td>{{$role->name_cn}}</td>
                    <td>{{$role->create_time}}</td>
                    <td class="td-manage">
                        @if($role->status == 1)
                            <a title="禁用" onclick="disable(this, '{{$role->id}}')" href="javascript:;">
                                <i class="layui-icon font-24">&#x1007;</i>
                            </a>
                        @endif
                        @if($role->status == 0)
                            <a title="启用" onclick="enable(this, '{{$role->id}}')" href="javascript:;">
                                <i class="layui-icon font-24">&#x1005;</i>
                            </a>
                        @endif
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
        <div class="page">
            {{$roles->links()}}
        </div>
    </div>
    <script>
        $(function  () {
            layui.use('form', function(){
                const form = layui.form;
                //自定义验证规则
                form.verify({
                    name: function(value){
                        let reg = /^[a-zA-Z]+$/;
                        if(!reg.test(value)){
                            return '该字段必须是英文';
                        }
                    },
                    name_cn: function(value){
                        let reg = /^[\u0391-\uFFE5]+$/;
                        if(!reg.test(value)){
                            return '该字段必须是中文';
                        }
                    },
                });
                //监听提交
                form.on('submit(add)', function(){
                    $.ajax({
                        url: '{{url("backstage/user/role/add")}}',
                        type: 'POST',
                        dataType: 'json',
                        data: $('#add-role').serialize(),
                        success: function (result) {
                            if (result.status === 0) {
                                layer.msg(result.msg);
                                location.href = '{{url("backstage/user/role")}}';
                                return false;
                            }
                            layer.msg(result.msg);
                            return false;
                        },
                        error: function () {
                            layer.msg('增加失败，请重试！');
                            return false;
                        }
                    });
                    return false;
                });
            });
        })

        /*角色-禁用*/
        function disable(obj, id){
            layer.confirm('确认要禁用吗？',function(){
                //发异步删除数据
                $.ajax({
                    url: '{{url("backstage/user/role/disable/")}}' + '/' + id,
                    type: 'get',
                    dataType: 'json',
                    data: {},
                    success: function (result) {
                        if (result.status === 0) {
                            $(obj).parents("tr").remove();
                            layer.msg('已禁用!', {icon: 1, time: 1000});
                            location.href = '{{url("backstage/user/role")}}';
                            return false;
                        }
                        layer.msg(result.msg);
                        return false;
                    },
                    error: function () {
                        layer.msg('禁用失败，请重试！');
                        return false;
                    }
                });
                return false;
            });
        }

        /*角色-禁用*/
        function enable(obj, id){
            layer.confirm('确认要启用吗？',function(){
                //发异步删除数据
                $.ajax({
                    url: '{{url("backstage/user/role/enable/")}}' + '/' + id,
                    type: 'get',
                    dataType: 'json',
                    data: {},
                    success: function (result) {
                        if (result.status === 0) {
                            $(obj).parents("tr").remove();
                            layer.msg('已启用!', {icon: 1, time: 1000});
                            location.href = '{{url("backstage/user/role")}}';
                            return false;
                        }
                        layer.msg(result.msg);
                        return false;
                    },
                    error: function () {
                        layer.msg('启用失败，请重试！');
                        return false;
                    }
                });
                return false;
            });
        }
    </script>
@endsection
